<template>
    <div class="meishi">
        <van-popup v-model="show" position="top" :overlay="true" style="top: 90px">
            <div class="popup-card">

            </div>
        </van-popup>

        <div class="header">
            <router-link to="-1">
                <div class="back">
                    <van-icon class="van-icon-arrow-left"></van-icon>
                </div>
            </router-link>
            <div class="search">
                <div class="search-box">
                    <van-icon class="van-icon-search"></van-icon>
                    <div class="keywork">私人订制</div>
                </div>
            </div>
            <div class="tools">
                <van-icon class="van-icon-location5"></van-icon>
            </div>
        </div>

        <div class="filter-top-tools" :class="{isFixed : isFilterFixed}" v-if="isFilterFixed" ref="top_filter">
            <div class="filter-item" @click="handlerFilter('all')">
                <span>全部</span>
                <van-icon class="van-icon-arrowdown"></van-icon>
            </div>
            <div class="filter-item" @click="handlerFilter('all')">
                <span>附近</span>
                <van-icon class="van-icon-arrowdown"></van-icon>
            </div>
            <div class="filter-item" @click="handlerFilter('all')">
                <span>智能排序</span>
                <van-icon class="van-icon-arrowdown"></van-icon>
            </div>
            <div class="filter-item" @click="handlerFilter('all')">
                <span>筛选</span>
                <van-icon class="van-icon-arrowdown"></van-icon>
            </div>
        </div>

        <van-pull-refresh :head-height="headHeight" v-model="isLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" @load="onLoad">

                <div class="body-wrapper">
                    <div class="banner">
                        <div class="wrapper">
                            <van-swipe :autoplay="2000">
                                <van-swipe-item v-for="(src, index) in ImageList" :key="index">
                                    <img v-lazy="src" />
                                </van-swipe-item>
                            </van-swipe>
                        </div>
                    </div>

                    <div class="nav">
                        <div class="nav-items">
                            <div class="item">
                                <div class="icon">
                                    <div class="icon-box" style="background-image: linear-gradient(to bottom, #FD9126, #FF5000);">
                                        <van-icon class="van-icon-meishi"></van-icon>
                                    </div>
                                </div>
                                <div class="text">美食</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <div class="icon-box" style="background-image: linear-gradient(to bottom, #E33129, #F94B41);">
                                        <van-icon class="van-icon-maoyan1"></van-icon>
                                    </div>
                                </div>
                                <div class="text">电影/演出</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <div class="icon-box" style="background-image: linear-gradient(to bottom, #915533, #BC835B);">
                                        <van-icon class="van-icon-booking"></van-icon>
                                    </div>
                                </div>
                                <div class="text">酒店住宿</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <div class="icon-box" style="background-image: linear-gradient(to bottom, #02C1A7, #1AC6B1);">
                                        <van-icon class="van-icon-xiuxianyule1"></van-icon>
                                    </div>
                                </div>
                                <div class="text">休闲娱乐</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <div class="icon-box" style="background-image: linear-gradient(to bottom, #FFAC00, #FFBC1C);">
                                        <van-icon class="van-icon-waimai"></van-icon>
                                    </div>
                                </div>
                                <div class="text">外卖</div>
                            </div>
                        </div>

                        <div class="nav-items">
                            <div class="item">
                                <div class="icon">
                                    <van-icon class="van-icon-icon16" style="color: orange"></van-icon>
                                </div>
                                <div class="text">闪购超市</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <van-icon class="van-icon-jiudian" style="color: orange"></van-icon>
                                </div>
                                <div class="text">名宿/公寓</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <van-icon class="van-icon-lvyou" style="color: #42A5FC"></van-icon>
                                </div>
                                <div class="text">周边游/旅游</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <van-icon class="van-icon-jipiao1" style="color: #42A5FC"></van-icon>
                                </div>
                                <div class="text">火车/机票船</div>
                            </div>
                            <div class="item">
                                <div class="icon">
                                    <van-icon class="van-icon-zhuangxiu1" style="color: #02C1A7"></van-icon>
                                </div>
                                <div class="text">家具/装修</div>
                            </div>
                        </div>
                    </div>

                    <div class="card-wrapper">

                        <div class="card-01">
                            <div class="box">
                                <div class="title">限时秒杀</div>
                                <div class="desc">112家店11:00开秒</div>
                                <div class="band">
                                    <img :src="goodsPic" alt="">
                                </div>
                            </div>
                            <div class="box">
                                <div class="title">名店抢购</div>
                                <div class="desc">大牌疯抢，低至3.7折</div>
                                <div class="band">
                                    <img :src="goodsPic" alt="">
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="goods-wrapper" ref="goods_items">

                        <div class="filter-tools">
                            <div class="filter-item" @click="handlerFilter('all')">
                                <span>全部</span>
                                <van-icon class="van-icon-arrowdown"></van-icon>
                            </div>
                            <div class="filter-item" @click="handlerFilter('all')">
                                <span>附近</span>
                                <van-icon class="van-icon-arrowdown"></van-icon>
                            </div>
                            <div class="filter-item" @click="handlerFilter('all')">
                                <span>智能排序</span>
                                <van-icon class="van-icon-arrowdown"></van-icon>
                            </div>
                            <div class="filter-item" @click="handlerFilter('all')">
                                <span>筛选</span>
                                <van-icon class="van-icon-arrowdown"></van-icon>
                            </div>
                        </div>

                        <div class="goods-card-items" v-for="(item, index) in goodsList" :key="index">
                            <div class="goods-card-item">
                                <div class="thumb">
                                    <img :src="goodsPic" alt="">
                                </div>
                                <div class="goods-info">
                                    <div class="brand">
                                        <div class="van-ellipsis">
                                            长藤鬼校(广州旗舰店){{index}}
                                        </div>
                                    </div>
                                    <div class="desc">
                                        [北京路商业区]单人恐怖体验票1张
                                    </div>
                                    <div class="goods-price">
                                        <div class="price-box">
                                            <span class="price">￥79 <span class="up">起</span></span>
                                            <del class="origin">门市价:￥15元</del>
                                        </div>
                                        <div class="sales">已售7839</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </van-list>
        </van-pull-refresh>

    </div>
</template>

<script>
import wx from "weixin-js-sdk";
import { getWxLocation } from "@/libs/weixin";
import { mapGetters } from "vuex";
import ImageList from "./banner";
import NavIcon from "./nav";
import goodsPic from "@/assets/images/test/goods.jpg";

import {
    PullRefresh,
    List,
    Icon,
    Button,
    Toast,
    Swipe,
    SwipeItem,
    Popup
} from "vant";

let map, marker;

export default {
    name: "Main",
    components: {
        [PullRefresh.name]: PullRefresh,
        [List.name]: List,
        [Button.name]: Button,
        [Icon.name]: Icon,
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
        [Popup.name]: Popup,
        [Toast.name]: Toast
    },
    data() {
        return {
            goodsList: 20,
            isLoading: false,
            ImageList,
            NavIcon,
            goodsPic,
            show: false,
            loading: false,
            finished: false,
            isFilterFixed: false,
            headHeight: 50
        };
    },
    computed: {
        ...mapGetters(["userinfo"])
    },
    methods: {
        //下拉刷新
        onRefresh() {
            //vant下拉加载
            setTimeout(() => {
                this.$toast("刷新成功");
                this.isLoading = false;
            }, 500);
        },
        //上拉加载更多
        onLoad() {
            // 异步更新数据
            setTimeout(() => {
                if (this.goodsList > 10) {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;
                }
                this.goodsList = this.goodsList + 4;
                this.loading = false;
            }, 1000);
        },
        //滚动事件处理
        handlerScroll() {
            //css 中的 transform 会使 fiexd 失效
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;

            //获取
            const goods_items_ele = this.$refs["goods_items"];
            let offsetTop = goods_items_ele.offsetTop;

            //console.log("滚动位置：" + scrollTop, "元素filter位置：" + offsetTop);

            if (scrollTop >= offsetTop) {
                this.isFilterFixed = true;
            } else {
                this.isFilterFixed = false;
            }
        },

        handlerFilter(type) {
            const goods_items_ele = this.$refs["goods_items"];
            window.scrollTo(0, goods_items_ele.offsetTop);
            this.show = true;
        },
        // 微信分享
        weixinShare() {
            wx.ready(() => {
                let link = window.location.href;

                wx.onMenuShareTimeline({
                    title: "首页", // 分享标题
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://www.baidu.com/img/baidu_jgylogo3.gif", // 分享图标
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });

                wx.onMenuShareAppMessage({
                    title: "首页", // 分享标题
                    desc: "公众号分享描述信息", // 分享描述
                    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: "https://www.baidu.com/img/baidu_jgylogo3.gif", // 分享图标
                    type: "", // 分享类型,music、video或link，不填默认为link
                    dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
                    success: function() {
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function() {
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
        }
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.handlerScroll); //移除监听滚动事件
    },
    watch: {},
    mounted: function() {
        this.$nextTick(function() {
            this.weixinShare(); //微信分享
            window.addEventListener("scroll", this.handlerScroll); //监听滚动事件
        });
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./meishi.scss";
</style>